<template>
  <!-- 大客户线索管理->大客户信息查询 -->
  <div>
    <!-- 搜索 -->
    <TopFilter ref="conditionFilter" :list="topFilterInit" :cols="3" labelWidth="100" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <!-- table -->
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchapi"
      :isSelectColumn="isSelectColumn"
      :params="fetchParams"
      :datakey="'records'"
      columnsRef="customerManage_clue_customerInfo_index_01"
      :onColumnsChange="columns => (this.columns = columns)"
    >
      <template slot="controls">
        <el-button size="small" type="primary" icon="el-icon-download" :loading="exportLoading" @click="exportData">下载</el-button>
      </template>
    </FilterTable>
    <!-- 线索来源是主机厂的经销商弹窗 -->
    <BaseDialog title="经销商查询" :visible.sync="visibleDealer" width="1000px" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <dealer-madal ref="addDialog" selectType="multiple" v-model="initDealerData" @close="closeHandler" />
    </BaseDialog>
    <Drawer :visible.sync="visibleDrawer" title="线索分配明细" :width="920" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <info-modal v-model="clueId" @close="infoClose" />
    </Drawer>
    <!-- 线索来源是经销商的经销商弹窗 -->
    <BaseDialog title="经销商查询" :visible.sync="visibleDealerDLR" width="1000px" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <dealer-madal ref="addDialog" selectType="multiple" v-model="initDealerData" @close="closeHandler" />
    </BaseDialog>
    <Drawer :visible.sync="visibleDrawerDLR" title="线索分配明细" :width="920" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <info-dlr-modal v-model="clueId" @close="infoClose" />
    </Drawer>
  </div>
</template>
<script>
import dealerMadal from '@/pages/cms-common/dealerdata/index.vue';
import infoModal from '../createClue/info';
import infoDlrModal from '../createClue/dealerInfo';
import { dictionary } from '@/utils/dictMixin';
import { PHONE_PATTERN } from '@/utils/validate'; // 验证
import { getFilterManager } from '@/api/cms-api/customerManage/clue/areaBossOperation'; //大客户区域经理选择
import { region } from '@/api/cms-common/region'; //行政区域
import { getOemClueList, exportOemClueList } from '@/api/cms-api/customerManage/clue/createClue'; //大客户线索管理
import { Notification } from 'element-ui';
import { exportExcelFile, formatdateByDay } from '@/utils';
export default {
  name: 'customerAdd',
  mixins: [dictionary, region],
  components: {
    infoModal,
    infoDlrModal,
    dealerMadal
  },
  data() {
    return {
      visibleDrawer: false,
      visibleDrawerDLR: false,
      visibleDealer: false,
      visibleDealerDLR: false,
      isSelectColumn: false,
      clueId: null,
      topFilterInit: this.topFilterInitFun(),
      fetchapi: getOemClueList,
      fetchParams: {}, //参数
      columns: this.creatHeader(),
      initDealerData: {}, //经销商选择框数据初始化
      dealerCode: null,
      exportLoading: false
    };
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
    this.initAreaManager();
  },
  methods: {
    //搜索数据
    topFilterInitFun() {
      return [
        { type: 'INPUT', label: '客户公司名称', fieldName: 'customerName', placeholder: '请输入', initialValue: '' },
        { type: 'SELECT', label: '客户类型', fieldName: 'customerType', placeholder: '请选择', initialValue: '', itemList: this.createDictList('2506') },
        { type: 'SELECT', label: '客户性质', fieldName: 'customerProperty', placeholder: '请选择', initialValue: '', itemList: this.createDictList('2534') },
        { type: 'SELECT', label: '省份', fieldName: 'customerProvince', placeholder: '请选择', initialValue: '', itemList: this.createRegionList() },
        { type: 'SELECT', label: '客户状态', fieldName: 'customerStatus', placeholder: '请选择', initialValue: '', itemList: this.createDictList('2507') },
        { type: 'SELECT', label: '客户来源', fieldName: 'customerSource', placeholder: '请选择', initialValue: '', itemList: this.createDictList('2508') },
        {
          type: 'INPUT',
          label: '经销商',
          fieldName: 'dealerShowName',
          placeholder: '请选择',
          initialValue: '',
          readonly: true,
          unitRender: () => {
            return (
              <div>
                <el-button slot="append" icon="el-icon-search" onClick={() => this.dealerHandle()}></el-button>
                <el-button slot="append" icon="el-icon-delete" onClick={() => this.clearSelectDealear()}></el-button>
              </div>
            );
          }
        },
        { type: 'SELECT', label: '大客户区域经理', fieldName: 'majorSbuManager', placeholder: '请输入', initialValue: '', filterable: true, itemList: [] },
        { type: 'INPUT', label: '客户关键联系人', fieldName: 'keyLinkMan', placeholder: '请输入', initialValue: '' },
        { type: 'INPUT', label: '联系电话', fieldName: 'linkPhone', placeholder: '请输入', initialValue: '' }
      ];
    },
    //搜索获取数据
    changeHandle(val) {
      if (!val || val.dealerShowName == null || val.dealerShowName == '') {
        this.dealerCode = '';
      }
      let extParams = { dealerCodes: this.dealerCode };
      this.fetchParams = Object.assign({}, val, extParams);
    },
    //table表头和数据源
    creatHeader() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 100,
          fixed: 'left',
          render: (props, h) => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.detailHandle(props.row)}>
                  明细
                </el-button>
              </div>
            );
          }
        },
        {
          title: '线索来源',
          dataIndex: 'clueSource',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.clueSource, '2515')}</span>;
          }
        },
        { title: '客户公司名称', dataIndex: 'customerName', sorter: true },
        {
          title: '客户类型',
          dataIndex: 'customerType',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.customerType, '2506')}</span>;
          }
        },
        {
          title: '客户性质',
          dataIndex: 'customerProperty',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.customerProperty, '2534')}</span>;
          }
        },
        {
          title: '所在省',
          dataIndex: 'customerProvince',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createRegionText(props.row.customerProvince)}</span>;
          }
        },
        {
          title: '所在市',
          dataIndex: 'customerCity',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createRegionText(props.row.customerCity)}</span>;
          }
        },
        {
          title: '所在县/区',
          dataIndex: 'customerDistrict',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createRegionText(props.row.customerDistrict)}</span>;
          }
        },
        { title: '详细地址', dataIndex: 'customerAddress', sorter: true },
        // { title: '区域经理', dataIndex: 'majorSbuManagerName', sorter: true },
        // { title: '指定经销商', dataIndex: 'dealerName', sorter: true },
        {
          title: '客户状态',
          dataIndex: 'customerStatus',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.customerStatus, '2507')}</span>;
          }
        },
        {
          title: '客户来源',
          dataIndex: 'customerSource',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.customerSource, '2508')}</span>;
          }
        },
        {
          title: '所属行业分类',
          dataIndex: 'industryCategory',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.industryCategory, '2510')}</span>;
          }
        },
        {
          title: '行业地位',
          dataIndex: 'industryStatus',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.industryStatus, '2511')}</span>;
          }
        },
        {
          title: '购车用途',
          dataIndex: 'buyPurpose',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.buyPurpose, '2513')}</span>;
          }
        },
        { title: '预计采购日期', dataIndex: 'estimatePurchaseDate', dateFormat: 'YYYY-MM', sorter: true },
        {
          title: '客户采购方式',
          dataIndex: 'purchaseMode',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.purchaseMode, '2512')}</span>;
          }
        },
        {
          title: '预算来源',
          dataIndex: 'budgetSource',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.budgetSource, '2514')}</span>;
          }
        },
        { title: '客户关键联系人', dataIndex: 'keyLinkMan', sorter: true },
        { title: '联系方式', dataIndex: 'linkPhone', sorter: true },
        { title: '创建人', dataIndex: 'createdByName', sorter: true },
        {
          title: '创建时间',
          dataIndex: 'createdAt',
          sorter: true,
          render: props => {
            return <span>{formatdateByDay(props.row.createdAt)}</span>;
          }
        }
      ];
    },
    // 经销商打开窗口 -传数据
    dealerHandle() {
      this.initDealerData = {
        excludeBigCustomer: true, // 是否查询大客户经销商，如果查询 true，不查询 false
        id: 1001101
      }; //行id
      this.visibleDealer = true;
    },
    // 经销商关闭窗口 -返回数据
    closeHandler(data) {
      if (data.data != null && typeof data.data != 'undefined' && data.data.length > 0) {
        //返回数据逻辑自己写
        let dealerNames = [];
        let dealerCodes = [];
        data.data.forEach(dealer => {
          dealerNames.push(dealer.dealerName);
          dealerCodes.push("'" + dealer.dealerCode + "'");
        });
        this.topFilterInit.find(item => item.fieldName === 'dealerShowName').initialValue = dealerNames.join(',');
        this.dealerCode = dealerCodes.join(',');
      }

      this.visibleDealer = data.visible; //关闭弹窗
    },
    clearSelectDealear() {
      this.topFilterInit.find(item => item.fieldName === 'dealerShowName').initialValue = '';
      this.dealerCode = '';
    },
    //详情
    detailHandle(row) {
      this.clueId = row['clueId']; //行id
      //线索来源
      this.clueSource = row['clueSource'];
      if (this.clueSource == 25151001) {
        //主机厂
        this.visibleDrawer = true;
      } else {
        //经销商
        this.visibleDrawerDLR = true;
      }
    },
    //关闭详情
    infoClose(data) {
      this.visibleDrawer = false;
      this.visibleDrawerDLR = false;
      if (data.type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    },
    //初始化区域经理选择框
    async initAreaManager() {
      let managerList = await getFilterManager();
      let initList = new Array();
      let userIds = [];
      if (managerList != null && managerList.data.length > 0) {
        managerList.data.forEach(mData => {
          let uid = mData.userId;
          if (uid != null && uid != '' && userIds.indexOf(uid) == -1) {
            userIds.push(uid);
            let selectObj = new Object();
            selectObj.text = mData['majorSbuManagerName'];
            selectObj.value = mData['userId'];
            initList.push(selectObj);
          }
        });
      }
      this.topFilterInit.find(item => item.fieldName === 'majorSbuManager').itemList = initList;
    },
    async exportData() {
      let r = await this.$refs.conditionFilter.GET_FORM_DATA();
      let p = null;
      if (r != null && r.length > 1) {
        p = r[1];
      }

      if (!p || p.dealerShowName == null || p.dealerShowName == '') {
        this.dealerCode = '';
      }
      let extParams = { dealerCodes: this.dealerCode };
      let extP = Object.assign({}, p, extParams);
      this.exportLoading = true;
      exportOemClueList(extP).then(res => {
        exportExcelFile(res.data, '大客户线索数据');
        this.exportLoading = false;
      });
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    }
  }
};
</script>

<style lang="less" scoped></style>
